<template>
  <div id="obj-model"></div>
</template>

<script type="module">
import * as THREE from "three"
import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader'
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader'

const OrbitControls = require('three-orbit-controls')(THREE)
export default {
  name: "ObjModel",
  data() {
    return {
      scene: '',
      light: '',
      camera: '',
      controls: '',
      renderer: '',
    }
  },
  methods: {
    //初始化three.js相关内容
    init() {
      this.scene = new THREE.Scene();
      //环境光
      this.scene.add(new THREE.AmbientLight(0x999999));
      //从正上方（不是位置）照射过来的平行光，0.45的强度
      this.light = new THREE.DirectionalLight(0xdfebff, 0.40);
      this.light.position.set(50, 200, 100);
      this.light.position.multiplyScalar(0.3);
      this.scene.add(this.light);
      //初始化相机
      this.camera = new THREE.PerspectiveCamera(45, (window.innerWidth/2.5) / (window.innerHeight/2.2), 1, 1000);
      this.camera.position.set(10, 90, 65);
      this.camera.lookAt(this.scene.position);
      //初始化控制器
      this.controls = new OrbitControls(this.camera);
      this.controls.target.set(0, 0, 0);
      this.controls.minDistance = 20;
      this.controls.maxDistance = 500;
      this.controls.maxPolarAngle = Math.PI / 3;
      // 是否开启鼠标右键按下之后可以拖拽平移相机的功能
      this.controls.enablePan = true;
      this.controls.update();
      //渲染
      this.renderer = new THREE.WebGLRenderer({
        alpha: true,
      });
      this.renderer.setClearColor(0x000000);
      //为了兼容高清屏幕
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth/2.5, window.innerHeight/2.2);

      const container = document.getElementById('obj-model');
      container.appendChild(this.renderer.domElement);
      //添加窗口监听事件（resize-onresize即窗口或框架被重新调整大小）
      window.addEventListener('resize', this.onWindowResize, false);
    },
    //窗口监听函数
    onWindowResize() {
      this.camera.aspect = (window.innerWidth/2.5) / (window.innerHeight/2.2);
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth/2.5, window.innerHeight/2.2);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },
    render() {
      this.renderer.render(this.scene, this.camera);
    },
    //外部模型加载函数
    loadObj() {
      let geometry = new THREE.BoxGeometry(125, 0.2, 125)
      let material = new THREE.MeshNormalMaterial()
      this.mesh = new THREE.Mesh(geometry, material)
      this.mesh.position.set(0, -10, 0)
      this.scene.add(this.mesh)

      //包含材质
      new MTLLoader().setPath('/models/female02/').load('female02.mtl', materials => {
        console.log("materials", materials)
        materials.preload();
        new OBJLoader().setMaterials(materials).setPath('/models/female02/').load('female02.obj', obj => {
          obj.scale.set(0.2, 0.2, 0.2)
          obj.position.set(0, 0, 0)
          this.scene.add(obj)
        });
      });
    }
  },
  mounted() {
    this.init();
    this.loadObj();
    this.animate();
  }
}
</script>

<style scoped>
#obj-module {
  width: 320px;
  margin: 0 auto;
  height: 800px;
  overflow: hidden;
}
</style>
